<script setup>
import {ref, shallowRef} from 'vue'
import headSearchVue from '../../components/headSearch/headSearch.vue';
import { getTypeList } from '../../api';
import typeItemVue from '../../components/typeItem/typeItem.vue';
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
const headSearch = shallowRef(headSearchVue)
const typeItem = shallowRef(typeItemVue)

const n =ref(1)
const typeList = ref([])
const getlist= async () =>{ 
	const list= await getTypeList(n.value)
	typeList.value =[...typeList.value,...list.data]
	}
getlist()

onReachBottom(()=>{
	n.value++
	getlist()
})
onPullDownRefresh(()=>{
	n.value =1
	typeList.value= []
	getlist()
	setTimeout(()=>{
		uni.stopPullDownRefresh()
	},1000)
})


</script>
<template>
	<headSearch title="分类"></headSearch>
	<view id="app">
		<view class="main">
			<typeItem v-for="(item,index) in typeList" :key="item._id"
			 :info="item" :title="item.name"></typeItem>
			</view>
		</view>
</template>

<style lang="scss" scoped>
	       @import url("/app.style.scss");
.main {
	width: 750rpx;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
</style>
